<script>
export default {
  data() {
    return {
      ruleFrom: {
        userAccount: '',
        userPassword: ''
      }
    }
  },
  methods: {
    async loginFrom(res) {
      if(res.userAccount.length > 1 && res.userPassword.length > 1) {
        console.log(this.ruleFrom);
        const {data : result} = await this.$http.post("/flower-manage/login",this.ruleFrom);
        if(result.code === 1){
          this.$message.success(result.msg);
          localStorage.setItem("userId",result.data);
          this.$router.push("/home");
        }else {
          this.$message.error(result.msg);
        }
      }
    }
  }
}
</script>

<template>
  <div class="app">
    <header>
      <h1>晚云小卖铺管理系统</h1>
      <h2><a href="/register">用户注册</a></h2>
    </header>
    <section>
      <div class="bigbg">
        <div class="left"></div>
        <div class="right">
          <h1>花店管理员登录</h1>
          <div class="login_bg1"></div>
          <div class="login_bg2"></div>
          <div class="login">
            <input
              class="name"
              type="text"
              name="account"
              v-model="ruleFrom.userAccount"
              placeholder="请输入管理员账户"
              autocomplete="off"
            /><br />
            <input
              class="pass"
              type="password"
              name="password"
              v-model="ruleFrom.userPassword"
              placeholder="请输入管理员密码"
              autocomplete="off"
            /><br />
            <input class="btn" type="button" value="登录" @click="loginFrom(ruleFrom)" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  color: white;
  text-decoration: none;
}
div {
  width: 500px;
  height: 550px;
}
input {
  padding-left: 10px;
}
.app {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(./image/loginbg.jpg) no-repeat;
  background-size: 100% 100%;
  header {
    position: relative;
    height: 50px;
    background-color: black;
    z-index: 1;
    opacity: 0.2;
    h1 {
      position: absolute;
      color: white;
      font-weight: 400;
      top: 3px;
      left: 8px;
    }
    h2 {
      position: absolute;
      top: 8px;
      right: 50px;
    }
  }
  section {
    position: relative;
    .bigbg {
      position: absolute;
      width: 1100px;
      height: 550px;
      top: 160px;
      left: 382px;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.8);
      .left {
        position: absolute;
        left: 0;
        width: 600px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        overflow: hidden;
        background: url(./image/login_left.jpg);
        background-size: 100% 100%;
      }
      .right {
        position: absolute;
        right: 0;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        h1 {
          margin: 5px;
          color: skyblue;
          font-size: 32px;
        }
        .login_bg1,
        .login_bg2 {
          position: absolute;
          top: 100px;
          left: 75px;
          width: 350px;
          height: 350px;
          background: rgba(0, 0, 0, 0.1);
          border-radius: 10px;
        }
        .login {
          position: absolute;
          top: 90px;
          left: 70px;
          width: 360px;
          height: 370px;
          border-radius: 15px;
          background: rgb(255, 255, 255);
          input {
            height: 50px;
            width: 300px;
            margin-bottom: 30px;
            outline: none;
            border: 0;
          }
          .name {
            .login_pass_name();
            margin-top: 50px;
          }
          .pass {
            .login_pass_name();
          }
          .btn {
            font-size: 20px;
            background-color: skyblue;
            border-radius: 15px;
          }
        }
        .login_bg1 {
          transform: rotate(-15deg) scale(1, 1);
        }
        .login_bg2 {
          transform: rotate(15deg) scale(1, 1);
        }
      }
    }
  }
}
.login_pass_name {
  font-size: 24px;
  border-bottom: 1px solid #999;
  color: skyblue;
  border-radius: 5px;
}
</style>
